<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 资源中心 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row>
          <el-button size="small" type="primary" :loading="excelLoad" @click="openPopup">创建任务</el-button>
          <el-button size="small" type="primary"><a href="https://daidaiwang-1307355890.cos.ap-beijing.myqcloud.com/customersInfo.xlsx"
             style="color:#fff;" target="_black">下载excel模板</a></el-button>
        </el-row>

        <div style="margin-top: 15px">
          <el-date-picker class="mr10" v-model="startTime_endTime" type="daterange" range-separator="-" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd">
          </el-date-picker>
          <el-input v-model="query.kw" placeholder="请输入用户名/电话查询" class="handle-input mr10"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        class="table"
        ref="tableList"
        header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="batchNum" label="任务批次" width="120"></el-table-column>
        <el-table-column label="时间" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="上传人" width="120"></el-table-column>
        <el-table-column prop="cityCode" label="城市"></el-table-column>
        <el-table-column prop="count" label="总条数" width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-s-operation" class="red" @click="viewDetail(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next"
          :current-page="query.page"
          :page-size="query.limit"
          :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
          :total="totalCount"
          :pager-count="5"
          @size-change="handlePageSelectChange"
          @current-change="handlePageChange"
          @prev-click="handlePageChange"
          @next-click="handlePageChange"></el-pagination>
      </div>
    </div>
    
    <!-- 新增弹框 -->
    <el-dialog title="创建任务" :visible.sync="editVisible" width="30%" :close-on-click-modal="false">
      <el-form ref="form" label-width="150px">
        <el-form-item label="城市" v-if="!innerOnce">
          <el-cascader
            ref="testRef"
            v-model="cityDataSelected" 
            :options="cityData" 
            :props="{ expandTrigger: 'hover', label: 'label', value: 'code' }"
            @change="handleChange"
            style="width: 100%"></el-cascader>
        </el-form-item>
        <el-form-item label="上传Excel" v-else>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://www.dazhimu.cc/resource/save"
            :headers="uploadHeader"
            :limit="1"
            accept=".xlsx"
            :data="uploadData"
            :on-success="fileChange"
            :on-progress="fileloadChange"
            :show-file-list="false"
            style="float: left; margin-right: 10px">
            <el-button size="small" type="primary" :loading="excelLoad">选择文件夹</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="!innerOnce" @click="nextStation">下 一 步</el-button>
        <el-button  v-if="innerOnce" @click="gobackFir">上 一 步</el-button>
      </span>
    </el-dialog>
    <!-- 详情弹框 -->
    <el-dialog title="详情" :visible.sync="detailVisible" width="60%" :close-on-click-modal="false">
      <div style="margin: 15px 0">
        <el-date-picker class="mr10" v-model="startTime_endTime_detail" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-select v-model="detailQuery.isShare" placeholder="请选择是否分配">
          <el-option
            v-for="item in optionsIs"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input v-model="detailQuery.kw" placeholder="请输入用户名/电话查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearchDetail">搜索</el-button>
        <el-button type="primary" :disabled="isDisabled" icon="el-icon-search" @click="shareSection">分配</el-button>
        <!-- <el-button type="primary" icon="el-icon-search" @click="shareAll">全部分配</el-button> -->
      </div>
      <el-table
        v-loading="loading"
        :data="detailData"
        border
        class="table"
        ref="tableDetail"
        @selection-change="handleSelectionChange"
        header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="cusName" label="客户名称" width="120"></el-table-column>
        <el-table-column prop="cusPhone" label="电话" width="120"></el-table-column>
        <el-table-column label="是否分配" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.isShare === 0 ? '否' : '是' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分配时间" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.shareTime === null ? '-' : parseTime(scope.row.shareTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分配公司" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.shareTeamName === null ? '-' : scope.row.shareTeamName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark === null ? '-' : scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="detailQuery.page"
        :page-sizes="[10, 20, 40, 100]"
        :pager-count="5"
        :page-size="detailQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="detailQuery.total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    
    <!-- 公司列表弹框 -->
    <el-dialog title="请选择公司" :visible.sync="visibleComList" width="60%" :close-on-click-modal="false">
      <div style="margin: 15px 0">
        <el-input v-model="companyAllList.kw" placeholder="请输入用户名/电话查询" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchCompany">搜 索</el-button>
        <el-button type="primary" icon="el-icon-search" @click="shareCommit">提 交 分 配</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="comListData"
        border
        class="table"
        ref="multipleTable"
        @select-all="selectAllCom"
        @select="selectTest"
        header-cell-class-name="table-header">
        <el-table-column type="selection" width="55" align="center" disable></el-table-column>
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="comName" label="公司名称" width="120"></el-table-column>
        <el-table-column prop="city" label="城市" width="120"></el-table-column>
        <el-table-column prop="cityCode" label="城市编码"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="companyAllList.page"
        :page-sizes="[10, 20, 40, 100]"
        :pager-count="5"
        :page-size="companyAllList.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="companyAllList.total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visibleComList = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { resourceTaskList, resourceDataList, customerTel, resourceComComList, resourceShare } from '../../../api/index';
import Storage from '../../../utils/localStorage';
import CITYARRDATA from '../../../utils/setCity';
import { parseTime } from '../../../utils/setTime';


export default {
  data() {
    return {
      comListData: [],
      visibleComList: false,
      companyAllList: {
        kw:'',
        page: 1,
        limit: 10
      },
      isDisabled: true,
      shareList: [],
      idList: [],
      innerOnce: false,
      uploadData: {
        city: '',
        cityCode: ''
      },
      editVisible: false,
      cityData: CITYARRDATA,
      autherIf:'',
      detailVisible: false,
      cityDataSelected: '',
      cityCode: '',
      loading: true,
      startTime_endTime: [],
      startTime_endTime_detail:[],
      optionsIs: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      detailQuery: {
        isShare: '',
        total: 0,
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        kw: '',
        taskId: '',
      },
      detailData:[],
      addNum: {
        dayNum: 0,
        monthNum: 0,
      },
      query: {
        page: 1,
        limit: 10,
        startTime: '',
        endTime: '',
        kw: '',
      },
      totalCount: 0,
      totalPage: 0,

      keyFlag: '',

      tableData: [],

      haiFlg: false,

      excelfalseFlg: false,
      exceltrueFlg: false,

      excelLoad: false,
      uploadHeader: { 'Authorization': Storage.getItem('token') ? Storage.getItem('token') : "1" },
      comId: '',

    };
  },
  created() {
    this.getData();
  },
  watch: {
    $route: 'getData'
  },
  methods: {
    shareCommit(){
      console.log(this.idList,this.comId);
      resourceShare({idList:this.idList,comId:this.comId}).then(res => {
        if (res.code === 0) {
          this.$message.success("提交成功");
          this.visibleComList = false
          this.detailVisible = false
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    selectAllCom(selection){
      if (selection.length > 1) {
        selection.length = 1;
      }
      this.comId = selection[0].comId
    },
    selectTest(selection, row){
      if (selection.length > 1) {
        let del_row = selection.shift();
        this.$refs.multipleTable.toggleRowSelection(del_row, false);
      }
      this.comId = row.comId
    },
    selectionCompany(val){
      if (val.length > 1) {
        return false
      }
    },
    searchCompany(){
      this.shareSection()
    },
    shareSection(){
      resourceComComList(this.companyAllList).then(res => {
        this.visibleComList = true
        this.comListData = res.userList
      })

    },
    shareAll(){},
    gobackFir(){
      this.innerOnce = false
    },
    nextStation(){
      if (this.cityDataSelected === '') {
        return 
      } else {
        for (const item of CITYARRDATA) {
          if (this.cityDataSelected !== item.code) {
            for (const el of item.children) {
              if (this.cityDataSelected === el.code) {
                this.cityCode = el.value
              }
            }
          }
        }
        
        if (this.cityCode === '直辖市') {
          for (const j of CITYARRDATA) {
            if (j.code === this.autherIf) {
              this.cityCode = j.value
            }
          }
        }
        this.uploadData.city = this.cityDataSelected
        this.uploadData.cityCode = this.cityCode
        
        this.innerOnce = true
      }
    },
    openPopup(){
      this.editVisible = true
    },
    handleChange(val){
      this.cityDataSelected = val[1]
      this.autherIf = val[0]
    },
    handleCurrentChange(val){
      this.detailQuery.page = val
      this.viewDetail(this.detailQuery.taskId)
    },
    handleSizeChange(val){
      this.detailQuery.limit = val
      this.viewDetail(this.detailQuery.taskId)
    },
    viewDetail(id) {
      this.detailQuery.taskId = id
      const obj = {
        page: this.detailQuery.page,
        limit: this.detailQuery.limit,
        startTime: this.detailQuery.startTime,
        endTime: this.detailQuery.endTime,
        isShare: this.detailQuery.isShare,
        kw: this.detailQuery.kw,
        taskId: this.detailQuery.taskId
      }
      this.detailVisible = true
      resourceDataList(obj).then(res => {
        if (res.code === 0) {
          this.detailData = res.userList;
          this.detailQuery.total = res.totalCount;
        } else {
          this.$message(res.msg);
        }
      })
    },
    handleSearchDetail(){
      this.detailQuery.page = 1;
      if (this.startTime_endTime_detail) {
        this.detailQuery.startTime = this.startTime_endTime_detail[0];
        this.detailQuery.endTime = this.startTime_endTime_detail[1];
      } else {
        this.detailQuery.startTime = '';
        this.detailQuery.endTime = '';
      }
      this.viewDetail(this.detailQuery.taskId);
    },
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loading = true;
      resourceTaskList(this.query).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.tableData = res.userList;
          this.totalCount = res.totalCount;
          this.totalPage = res.totalPage;
        } else {
          this.$message(res.msg);
        }
      });
    },
    // 分页切换
    handlePageChange(val) {
      this.loading = true;
      this.$set(this.query, 'page', val);
      this.getData();
    },
    // 分页调整
    handlePageSelectChange(val) {
      this.loading = true;
      this.$set(this.query, 'limit', val);
      this.getData();
    },
    //搜索
    handleSearch() {
      this.query.page = 1;
      if (this.startTime_endTime) {
        this.query.startTime = this.startTime_endTime[0];
        this.query.endTime = this.startTime_endTime[1];
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
      }
      this.getData();
    },
    //点击查看客户信息
    drawerStateClick(id, flag, tccc) {
      this.keyFlag = 'edit';
      setTimeout(() => {
        this.$refs.drawerState.drawerStateClick(id, flag, tccc);
      }, 100);
    },
    // 多选操作
    handleSelectionChange(val) {
      this.idList = []
      this.shareList = val
      this.shareList.length > 0 ? this.isDisabled = false : this.isDisabled = true
      for (const element of this.shareList) {
        this.idList.push(element.id)
      }
    },
    //导入中
    fileloadChange(event, file, fileList) {
      this.excelLoad = true;
    },
    //导入成功
    fileChange(response, file, fileList) {
      this.excelLoad = false;
      this.$refs.upload.clearFiles();
      if (response.code === 0) {
        this.$message.success("上传成功");
        this.getData();
        this.editVisible = false
      } else {
        this.$message("上传失败");
      }
    },
    //点击拨号
    clickTel(id, flg) {
      this.drawerStateClick(id, flg);
      customerTel({ cusId: id }).then(res => {
        if (res.code == 0) {
          this.$message.success("开始拨号");
        } else {
          this.$message(res.msg);
        }
      })
    },
    //点击云呼叫
    tcccClick(id, flg) {
      if (!window.tccc) {
        this.$message("暂未开通云呼功能，请联系管理员");
        return;
      }
      this.drawerStateClick(id, flg, 'tccc');
    },
    //修改跟进状态
    followClick(item, num) {
      this.$refs.followUp.getInit({ id: item.cId, tel: item.cPhone, name: item.cName, type: num });
    }
  },
  mounted() {
  },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
/* .table {
    width: 100%;
    font-size: 14px;
} */
.red {
    color: #409EFF;
}
.el-icon-star-on >>> .el-loading-spinner {
    margin-top: -10px;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.IconColor {
    color: #e6a23c;
}
/deep/ :focus {
    outline: 0;
}
.el-drawer__title {
    color: #72767b;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 25px;
    padding: 20px 35px 0;
}
.el-drawer__title span {
    font-size: 14px;
    color: #66b1ff;
    margin: 20px;
    cursor: pointer;
}
.el-radio {
    margin-right: 0px;
}
.beizhu_text {
    height: 794px;
    overflow: auto;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-left: 35px;
    padding: 20px;
    box-sizing: border-box;
    color: #72767b;
    font-size: 14px;
}
.beizhu_text > div:first-child {
    padding-top: 0;
}
.beizhu_text > div {
    padding: 5px 0;
}
.el-icon-star-on {
    font-size: 20px;
}
.qrCodeUrl >>> img {
    margin: 0 auto;
}
</style>
